{extend name="sitehome@style/base"/}
{block name="resources"}{/block}
{block name="main"}
<style>
	.title-icon {
		width: 50px;
		max-height:50px;
		margin-right: 5px;
	}
</style>
<div class="nc-function-search">
	<div class="layui-btn left" onclick="location.href='{:addon_url('DiyView://sitehome/Navigation/add')}'" >添加</div>
	<div class='layui-form'>
		<div class="layui-input-inline">
			<input type="text" name="title" autocomplete="off" placeholder="导航名称" class="layui-input">
		</div>
		<div class="layui-input-inline">
			<select name="is_show">
				<option value="all">全部</option>
				<option value="1">显示</option>
				<option value="0">不显示</option>
			</select>
		</div>
		<button class="layui-btn-primary layui-btn" lay-submit lay-filter='search'>搜索</button>
	</div>
</div>


<table id="list" lay-filter="article" class="layui-table"></table>

<script type="text/html" id="title">
	<span>
	{{#  if(d.icon == ''){ }}
	    <img src="DIYVIEW_IMG/navigation_default_icon.png" class="title-icon">
	{{#  } else { }}
	    <img src="{{nc.img(d.icon)}}" class="title-icon" style=""/>
	{{#  } }}
	</span>
	<span>&nbsp;&nbsp;{{d.title}}</span>
</script>

<script type="text/html" id="is_show">
	{{# if(d.is_show == 1) {}}
	<span>是</span>
	{{#}else{ }}
	<span>否</span>
	{{#}}}
</script>

<script type="text/html" id="sort_info">
	<input type="number" value="{{d.sort}}" class="layui-input sm" onchange="sortChange({{d.id}}, this)"/>
</script>

<script type="text/html" id="operation">
	<a class="default" lay-event="edit">编辑</a>
	<a class="default" lay-event="del">删除</a>
</script>

<script type="text/html" id="batchOperation">
	<button class="layui-btn layui-btn-primary" lay-event="delete">删除</button>
</script>

{/block}
{block name="script"}
<script>
	var table = new Table({
		elem: '#list',
		filter : "article",
		url : '{:addon_url("DiyView://sitehome/Navigation/lists")}',
		cols: [
			[
				{
					type: 'checkbox'
				},
				{
					field: '',
					width: '20%',
					title: '导航名称',
					templet: '#title'
				},  {
				field: 'url',
				width: '25%',
				title: '链接地址',
				templet: function(data) {
					if(data.nav_type == 0) {
						return '<a class="default" href='+data.url+'>'+data.url+'</a>';
					}else {
						return '<a class="default" href='+nc.url(data.url)+'>'+data.url+'</a>';
					}
				}
			},{
				field: '',
				width: '15%',
				title: '是否显示',
				templet: '#is_show'
			},{
				field: '',
				width: '15%',
				title: '排序',
				templet: '#sort_info'
			},{
				title: '操作',
				toolbar: '#operation'
			}]
		],
		bottomToolbar : "#batchOperation"
	}) ;
	
	//批量操作
	table.bottomToolbar(function(obj){
		if(obj.data.length < 1){
			layer.msg('请选择要操作的数据');
			return;
		}
		switch(obj.event) {
			case "delete":
				var id_array = new Array();
				for (i in obj.data) id_array.push(obj.data[i].id);
				del(id_array.toString());
				break;
		}
	});
	
	//监听工具条
	table.tool(function(obj){
		var data = obj.data;
		var event = obj.event;
		if(event === 'edit'){
			window.location.href = nc.url('DiyView://sitehome/Navigation/edit', {"id":data.id});
		}else if(event === 'del'){
			del(data.id)
		}
		
	});
	
	//删除
	function del(id) {
		layer.confirm('确定删除吗?', {
			btn: ['确定', '取消']
		}, function () {
			$.ajax({
				type: "post",
				async: false,
				url: '{:addon_url("DiyView://sitehome/Navigation/del")}',
				data: {'id': id},
				dataType: "JSON",
				success: function (res) {
					if (res.code == 0) {
						table.reload();
					}
					layer.msg(res.message);
				}
			});
		}, function () {
			layer.close();
		});
	}
	
	layui.use(['form'], function() {
		var form = layui.form;
		
		form.on('submit(search)', function (data) {
			var field = data.field;
			//重载表格
			table.reload({
				where: field,
				page: {
					curr: 1
				}
			});
		});
		
	});
	
	function sortChange(id, event){
		var sort = $(event).val();
		$.ajax({
			type:"post",
			async:false,
			url : '{:addon_url("DiyView://sitehome/Navigation/navSort")}',
			data:{'id':id, 'sort': sort},
			dataType : "JSON",
			success: function (res) {
				layer.msg(res.message);
				if(res.code == 0){
					table.reload();
				}
			}
		});
		
	}
</script>
{/block}